{template 'header'}
<style> 
.image-list{width: 100%;height: 85px;background-size: cover;padding: 10px 10px;overflow: hidden;}
.image-item{width: 65px;height: 65px;/*background-image: url(../images/iconfont-tianjia.png);*/background-size: 100% 100%;display: inline-block;position: relative;border-radius: 5px;margin-right: 10px;margin-bottom: 10px;border: solid 1px #e8e8e8;vertical-align: top;}
.image-item .file{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;opacity: 0;cursor: pointer;z-index: 0;}
.image-item.space{border: none;}
.image-item .image-close{position: absolute;display: inline-block;right: -6px;top: -6px;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius: 12px;background-color: #FF5053;color: #f3f3f3;border: solid 1px #FF5053;font-size: 9px;font-weight: 200;z-index: 2;}
.image-item .image-up{height: 70px;width: 70px;border-radius: 10px;line-height: 60px;border: 1px solid #ccc;color: #ccc;display: inline-block;text-align: center;background-size:65px 65px;}
.image-item .image-up:after{content: '+';font-size: 58px;}
.image-item.space .image-close{display: none;}
.image-thumb{height: 65px;width: 65px;position: absolute;left:0;right:0;z-index: 1;display: inline-block;}
.mui-input-group .mui-input-row{height:auto;}
</style>
<body>
	<header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">权益反馈</h1>
    </header>
    	<form method="post" enctype="multipart/form-data">
    	<div class="mui-content">
			<div class="mui-content-padded">
				<div class="mui-inline" style="width: 60%; margin-top: 60px; margin-left: 20%;"><p style="font-size: 18px; color: #222;">请您选择要反馈的问题</p></div>

				<div class="mui-content-padded">
				
				<select class="mui-btn mui-btn-block">
					{loop $question $q}
					<option value="{$q['category_id']}">{$q['question']}</option>
					{/loop}
				</select>
	
			</div>
				
				<!-- <select name="category_id">
					<label>请选择</label>
					{loop $question $q}
					<option value="{$q['category_id']}">{$q['question']}</option>
					{/loop}
				</select> -->
				
			</div>
			<div class="row mui-input-row" >
				<textarea id='remarks' name="remarks" class="mui-input-clear question" placeholder="请详细描述您反馈的问题,和详细的位置..." style="width: 90%; height: 230px; margin-left: 5%;"></textarea>
			</div>
			<div class="mui-input-cell"> 
 <!--    照片添加    -->
                <div class="row image-list" id="image-list">
                    <div class="image-item space" style="margin-left: 8%;"> 
                        <div class="image-up"></div>
                        <input class="file" type="file" name="file1" value="" accept="image/jpg,image/jpeg,image/png" onchange="viewimg();"  />
                    </div>  
                    <div class="image-item space" style="margin-left: 8%;"> 
                        <div class="image-up"></div>   
                        <input class="file" type="file" name="file2"  value="" accept="image/jpg,image/jpeg,image/png" onchange="viewimg();"  />
                    </div> 
                    <div class="image-item space" style="margin-left: 8%;"> 
                        <div class="image-up"></div>   
                        <input class="file" type="file" name="file3"  value="" accept="image/jpg,image/jpeg,image/png" onchange="viewimg();"  />
                    </div> 
                   
                </div> 
            </div>

            <div class="mui-button-row">
				<button type="submit" name="submit" id="submit" class="mui-btn mui-btn-primary" style="width: 80%">提交</button>
			</div>
			<input type="hidden" name="token" value="{$_W['token']}" />			
		</div>
		</form>



</body>
<script type="text/javascript">
	function viewimg($event){
	   //获取当前的input标签
	   var currentObj = event.currentTarget; 
	   //找到要预览的图片img标签，亦可动态生成
	   var img = currentObj.parentNode.children[0];
	   setImagePreview(currentObj, img);
		function setImagePreview(docObj, imgObjPreview) {
			if (docObj.files && docObj.files[0]) {
				imgObjPreview.style.display = 'block';
				imgObjPreview.style.backgroundImage="url('"+window.URL.createObjectURL(docObj.files[0])+"')";
			}
		}
	} 
</script>
</html>